<!--
 * @Author: lzeng
 * @Date: 2020-05-20 09:18:10
 * @description: 我的会员卡
-->
<template>
  <base-page-view class-name="page-container">
  <view class="main">
    <!-- <uni-nav-bar right-text="历史记录" title=" " @clickRight="clickRight" @clickLeft="clickLeft"> -->
    <base-nav title="" class="boxDetails_nav">
      <template slot="left" >
        <image class="header-left" src="/static/images/icon/icon_arror_left.png" @click="back()"/>
      </template>
      <template slot="title">
        <view class="title-nav">我的VIP会员卡</view>
      </template>
      <!-- <template slot="right">
        <view class="header-right" @click="$navigateTo('/pagesMine/myBuddy/history/index')">历史记录</view>
      </template> -->
    </base-nav>
    <view class="history" @click="$navigateTo('/pagesMine/myBuddy/history/index')">历史记录</view>
    <view class="tab">
      <tab :current="current" :values="items" @clickItem="onClickItem" styleType="text" activeColor="#000000"></tab>
    </view>
    <view class="content" :style="{position:'relative', top:head_panel_h+10+'px'}">
      <view v-if="current === 0" class="tab0">
        <view class="tab_list">
          <view class="tab_item" v-for="(item, index) in tabs[current].list" :key="index">
            <view class="floor_a">
              <view class="img_group">
                <b-image v-if="item.status == 2||item.status == 3" width="719" height="272" src="https://asset-uat.bisinuolan.cn/bixuan_uni/images/mine/vip_1.png" />
                <b-image v-else width="719" height="272" src="https://asset-uat.bisinuolan.cn/bixuan_uni/images/mine/vip_2.png" />
                <url-image v-if="item.status==1&&shareIdList.includes(item.id)" width="100" height="78" src="/static/images/member/my-frined/share-card.png" class="share-card" :back_img="false"/>
                <view class="article">
                  <view class="cardType">VIP会员卡</view>
                  <view class="cardTime">有效期{{item.expire_time_text}}</view>
                </view>
                <view class="endTime" :style="{opacity:item.status == 2||item.status == 3?0:1}">赠送剩余{{item.end_time - nowDate|timer}}</view>
              </view>
              <view class="article">
                <view class="giveBtn" @click="showSharePop(item)">
                  <text v-if="item.status == 1">立即赠送&nbsp;&nbsp;</text>
                  <text v-if="item.status == 2" style="color: #ccc;">已过期&nbsp;&nbsp;</text>
                  <text v-if="item.status == 3" style="color: #ccc;">{{item.friends_nickname}}已领取&nbsp;&nbsp;</text>
                  <!-- <uni-icons type="arrowright" :color="item.status != 1?'#ccc':''"></uni-icons> -->
                </view>
              </view>
            </view>
            <view class="floor_b"></view>
          </view>
          <view v-if="tabs[current].nomore&&tabs[current].list.length<1" class="empty_view">
            <image src="/static/images/commission/commission-empty.png" class="empty_img" />
            <view class="tit">暂无任何内容</view>
          </view>
          <view v-if="tabs[current].nomore&&tabs[current].list.length>0" class="nomore">暂无更多数据~</view>
        </view>
      </view>
      <view v-if="current === 1" class="tab1">
        <view class="tab_list">
          <view class="tab_item" v-for="(item, index) in tabs[current].list" :key="index">
            <view class="floor_a">
              <view class="img_group">
                <b-image v-if="item.status == 2||item.status == 3" width="719" height="272" src="https://asset-uat.bisinuolan.cn/bixuan_uni/images/mine/vip_1.png" />
                <b-image v-else width="719" height="272" src="https://asset-uat.bisinuolan.cn/bixuan_uni/images/mine/vip_2.png" />
                <url-image v-if="item.status==1&&shareIdList.includes(item.id)" width="100" height="78" src="/static/images/member/my-frined/share-card.png" class="share-card" :back_img="false"/>
                <view class="article">
                  <view class="cardType">VIP会员卡</view>
                  <view class="cardTime">有效期{{item.expire_time_text}}</view>
                </view>
                <view class="endTime" :style="{opacity:item.status == 2||item.status == 3?0:1}">赠送剩余{{item.end_time - nowDate|timer}}</view>
              </view>
              <view class="article">
                <view class="giveBtn" @click="showSharePop(item)">
                  <text v-if="item.status == 1">立即赠送&nbsp;&nbsp;</text>
                  <text v-if="item.status == 2" style="color: #ccc;">已过期&nbsp;&nbsp;</text>
                  <text v-if="item.status == 3" style="color: #ccc;">{{item.friends_nickname}}已领取&nbsp;&nbsp;</text>
                  <!-- <uni-icons type="arrowright" :color="item.status != 1?'#ccc':''"></uni-icons> -->
                </view>
              </view>
            </view>
            <view class="floor_b"></view>
          </view>
          <view v-if="tabs[current].nomore&&tabs[current].list.length<1" class="empty_view">
            <image src="/static/images/commission/commission-empty.png" class="empty_img" />
            <view class="tit">暂无任何内容</view>
          </view>
          <view v-if="tabs[current].nomore&&tabs[current].list.length>0" class="nomore">暂无更多数据~</view>
        </view>
      </view>
      <view v-if="current === 2" class="tab2">
        <view class="tab_list">
          <view class="tab_item" v-for="(item, index) in tabs[current].list" :key="index">
            <view class="floor_a">
              <view class="img_group">
                <b-image v-if="item.status == 2||item.status == 3" width="719" height="272" src="https://asset-uat.bisinuolan.cn/bixuan_uni/images/mine/vip_1.png" />
                <b-image v-else width="719" height="272" src="https://asset-uat.bisinuolan.cn/bixuan_uni/images/mine/vip_2.png" />
                <url-image v-if="item.status==1&&shareIdList.includes(item.id)" width="100" height="78" src="/static/images/member/my-frined/share-card.png" class="share-card" :back_img="false"/>
                <view class="article">
                  <view class="cardType">VIP会员卡</view>
                  <view class="cardTime">有效期{{item.expire_time_text}}</view>
                </view>
                <view class="endTime" :style="{opacity:item.status == 2||item.status == 3?0:1}">赠送剩余{{item.end_time - nowDate|timer}}</view>
              </view>
              <view class="article">
                <view class="giveBtn" @click="showSharePop(item)">
                  <text v-if="item.status == 1">立即赠送&nbsp;&nbsp;</text>
                  <text v-if="item.status == 2" style="color: #ccc;">已过期&nbsp;&nbsp;</text>
                  <text v-if="item.status == 3" style="color: #ccc;">{{item.friends_nickname}}已领取&nbsp;&nbsp;</text>
                  <!-- <uni-icons type="arrowright" :color="item.status != 1?'#ccc':''"></uni-icons> -->
                </view>
              </view>
            </view>
            <view class="floor_b"></view>
          </view>
          <view v-if="tabs[current].nomore&&tabs[current].list.length<1" class="empty_view">
            <image src="/static/images/commission/commission-empty.png" class="empty_img" />
            <view class="tit">暂无任何内容</view>
          </view>
          <view v-if="tabs[current].nomore&&tabs[current].list.length>0" class="nomore">暂无更多数据~</view>
        </view>
      </view>
    </view>
    <share ref="sharePop" :share-option="shareOption" :share-types="[5]" :needH5="true" @btnClick="shareBtnClick" />
    </view>
  </base-page-view>
</template>

<script>
  const tab_init = [
    {
      nomore: false,
      pageNo: 1,
      pageSize: 10,
      list: []
    },
    {
      nomore: false,
      pageNo: 1,
      pageSize: 10,
      list: []
    },
    {
      nomore: false,
      pageNo: 1,
      pageSize: 10,
      list: []
    }
  ]
  import { toBackPage } from '@/utils/navigateTo'
  import tab from '../component/tab.vue'
  import share from '@/components/share/index'
  import { mapState } from 'vuex'
  export default {
    components: {
      tab,
      share
    },
    computed: {
      ...mapState([
        'userInfo'
      ])
    },
    data() {
      return {
        tab_top_h: 0, //内容自适应高度
        head_panel_h: 0, //显示栏高度
        statusH: 0, //状态栏高度
        items: ['全部', '可使用', '不可用'],
        current: 0,
        tabs: tab_init,
        showShareIcon: true,
        shareTimer: null,
        shareBg: 'https://asset-uat.bisinuolan.cn/bixuan_uni/images/share/',
        shareOption: {} ,// 分享自定义设置
        share_id: '', //二维码地址栏ID参数
        nowDate: new Date().getTime(), //当前时间戳
        shareIdList:[],//点击立即赠送后缓存的分享id
      }
    },
    filters: {
      timer(stamp) {
        if (stamp <= 0) {
          stamp = 0
        }
        var second = Math.floor(stamp / 1000);
        var day = Math.floor(second / 3600 / 24);
        var hr = Math.floor(second / 3600 % 24);
        var min = Math.floor(second / 60 % 60);
        var sec = Math.floor(second % 60);
        return day + "天" + hr + "时" + min + "分" + sec + "秒";
      }
    },
    onPullDownRefresh() {
      this.tabs = tab_init
      this.tabs.forEach((item, index) => {
        item.nomore = false
        item.pageNo = 1
        item.pageSize = 10
        item.list = []
      })
      // this.init()
      this.getList()
    },
    onReachBottom() {
      setTimeout(()=>{
        this.tabs[this.current].pageNo += 1
        this.getList(this.current)
      }, 500)
    },
    onShareAppMessage(res) {
      return this.$queryShareOption(res, this.shareOption)
    },
    destroyed() {
      this.items.forEach((item, index) => {
        this.tabs[index].list = []
      })
    },
    onShow() {
      if(!this.token){
        this.$navigateTo('/pages/login/index');
        return;
      }
      this.shareIdList=uni.getStorageSync('myVip_shareList')||[];
      console.log(this.shareIdList);
      this.tabs.forEach((item, index) => {
        item.nomore = false
        item.pageNo = 1
        item.pageSize = 10
        item.list = []
      })
      this.getNowDate()
      this.getList()
      let that = this
      this.$nextTick(() => {
        uni.getSystemInfo({
          success: function(res) {
            let info = uni.createSelectorQuery().select(".boxDetails_nav");
            info.boundingClientRect(function(data) {
              that.head_panel_h = data.height
              // #ifdef MP-WEIXIN
              that.head_panel_h = data.height - res.statusBarHeight
              // #endif
            }).exec()
          }
        });
      })
    },
    methods: {
      back(){
        toBackPage();
      },
      getNowDate() {
        setInterval(() => {
          this.nowDate = new Date().getTime()
        }, 1000)
      },
      init() {
        this.items.forEach((item, index) => {
          this.tabs[index].list = []
          this.getList(index)
        })
      },
      countDown(stamp) {
        var second = Math.floor(stamp / 1000);
        var day = Math.floor(second / 3600 / 24);
        var hr = Math.floor(second / 3600 % 24);
        var min = Math.floor(second / 60 % 60);
        var sec = Math.floor(second % 60);
        return day + "天" + hr + "小时" + min + "分钟" + sec + "秒";
      },
      async getList(type) {
        const res = await this.$api.mineApi.getMemberCards({
          page_no: this.tabs[this.current].pageNo,
          page_size: this.tabs[this.current].pageSize,
          status: this.current
        })
        if (res.code === 0) {
          setTimeout(function() {
            uni.stopPullDownRefresh()
          }, 500)
          let data = res.data
          this.tabs[this.current].list = this.tabs[this.current].list.concat(data)
          console.log("data", data)
          console.log("type", this.current)
          if (data.length < this.tabs[this.current].pageSize) {
            this.tabs[this.current].nomore = true
          }
          // for (let s of this.tabs[this.current].list) {
          //   let timer = setInterval(_ => {
          //     if (s.end_time > 0) {
          //       s.end_time -= 1000;
          //     }
          //   }, 1000);
          //   this.$once('hook:beforeDestroy', () => {
          //     clearInterval(timer);
          //     timer = null
          //   })
          // }
          console.log(this.tabs)
        }
      },
      Pagination(type) {
        this.$api.mineApi.getMemberCards({
          page_no: this.tabs[this.current].pageNo,
          page_size: this.tabs[this.current].pageSize,
          status: type
        }).then(res => {
          if (res.code == 0) {
            let data = res.data
            this.tabs[this.current].list = this.tabs[this.current].list.concat(data)
            console.log("data", data)
            console.log("tabs", this.tabs)
            for (let i=0; i<this.tabs.length; i++) {
              if (data.length < this.tabs[i].pageSize) {
                this.tabs[i].nomore = true
              }
              for (let s of this.tabs[i].list) {
                let timer = setInterval(_ => {
                  if (s.remaining_timestamp > 0) {
                    s.remaining_timestamp -= 1000;
                  }
                }, 1000);
                this.$once('hook:beforeDestroy', () => {
                  clearInterval(timer);
                })
              }
            }
          } else {
            this.tabs[this.current].nomore = true
          }
        })
      },
      clickLeft() {
        uni.navigateBack({
          delta: 1
        })
      },
      clickRight(e) {
        this.$navigateTo('/pagesMine/myBuddy/history/index')
      },
      onClickItem(index) {
        if (this.current !== index.currentIndex) {
          this.current = index.currentIndex;
        }
        this.getList()
      },
      // 点击分享按钮
      showSharePop(record) {
        console.log('record', record)
        if (record.status == 2||record.status == 3) {
          return
        }
        this.id = record.id //二维码地址栏ID参数
        this.shareOption.share_url = '/pagesMine/member/give?id='+record.id
        this.shareOption.share_list = [
          {
            pic: this.shareBg + 'share_01.jpg',
            titleArr: [record.share_tips]
          }
        ]
        this.$trackSDK.track('bx.home.button.click', '', {
          title: '分享按钮'
        })
        if (this.token) {
          //点击分享的时候将分享id存起来，用于展示分享图标
          if(!this.shareIdList.includes(record.id)){
            this.shareIdList.push(record.id);
            uni.setStorageSync('myVip_shareList', this.shareIdList);//存储赠送的vip卡id
          }
          this.$refs.sharePop.show(this.shareOption)
        } else {
          this.$navigateTo('/pages/login/index')
        }
      },
      shareBtnClick(btnText) {
        this.$trackSDK.track('bx.home.button.click', '', {
          title: btnText
        })
      }
    }
  }
</script>

<style lang="scss">
  @import "../index.scss";
  .history {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 40rpx;
    background-color: #F5F5F5;
    z-index: 9;
    display: flex;
    justify-content: center;
    color: #989898;
  }
  .tab {
    background-color: #fff;
    padding: 20rpx 0;
    transform: translateY(-2rpx);
    width: 100%;
    z-index: 9;
    position: fixed;
  }
  /deep/ .uni-navbar__header-btns {
    width: 80px !important;
  }
  .giveBtn {
    display: flex;
    align-items: center;
    font-size: 30rpx;
    uni-text:nth-child(2) {
      line-height: 1rem;
      color: #D5D5D5 !important;
    }
  }

  .segmented-control {
    background-color: #fff;
    transform: translateY(-2rpx);
  }

  .content {
    .tab0, .tab1, .tab2 {
      .tab_list {
        .tab_item {
          position: relative;
        
          .floor_a {
            margin-top: 20rpx;
            position: relative;
            z-index: 1;
            .img_group {
              margin: 0 30rpx;
              position: relative;
              .share-card{
                position: absolute;
                top: 33rpx;
                right: 34rpx;
              }
              .article {
                display: flex;
                flex-direction: column;
                position: absolute;
                top: 0;
                padding: 70rpx 60rpx;
                color: #fff;
                .cardType {
                  font-size: 36rpx;
                  margin-bottom: 20rpx;
                }
                .cardTime {
                  font-size: 48rpx;
                  font-weight: bold;
                }
              }
              .endTime {
                position: absolute;
                right: 40rpx;
                bottom: 40rpx;
                color: #fff;
              }
            }
          }
        
          .floor_b {
            background-color: white;
            padding-top: 20rpx;
            height: 300rpx;
            width: 100%;
            position: absolute;
            bottom: 0;
            z-index: 0;
          }
        }
      }
    }
  }

  .content>view {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .article {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 37rpx 47rpx;
  }
  .boxDetails_nav{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative
    ::v-deep{
      .nav-title{
        font-weight: bold;
      }
      .title-part{
        display: flex;
        align-items: center;
        /* #ifdef H5 */
        justify-content: center;
        /* #endif */
      }
    }
    .title-nav{
      // display: inline-block;
      // position: absolute;
      // top: 50%;
      // left: 50%;
      // transform: translate(-50%,-50%);
      display: flex;
      align-items: center;
      font-size: 32rpx;
      text-align: center;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      // padding: 20rpx 0rpx 0rpx 60rpx;
      /* #ifdef MP-WEIXIN */
      margin-left: 60rpx;
      /* #endif */
    }
    .header-left-box{
      display: flex;
      align-items: center;
    }
    .header-left {
      height: 40rpx;
      width: 40rpx;
      margin-left: 11rpx;
      /* #ifdef MP-WEIXIN */
      margin-top: 12rpx;
      /* #endif */
    }
    .header-right {
      display: flex;
      align-items: center;
      height: 100%;
      margin-right:22rpx;
      /* #ifdef MP-WEIXIN */
      padding-right: 190rpx;
      /* #endif */
    }
  }
  .main {
    padding-bottom: 250rpx;
  }
</style>
